<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="main/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> --><!-- 本页未用到 -->
    <!-- This page CSS -->
    <!-- chartist CSS -->
    <link href="main/css/morris.css" rel="stylesheet">
    <!--c3 CSS -->
    <!-- <link href="assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> --><!-- 待考证，可能ajax之后要用 -->
    <!--Toaster Popup message CSS -->
    <!-- <link href="assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> --><!-- 本页未用到 -->
    <!-- Custom CSS -->
    <link href="main/css/style.min.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <!-- <link href="main/css/pages/dashboard1.css" rel="stylesheet"> --><!-- 就一句,已写入style.css -->
    <!-- You can change the theme colors from here -->
    <link href="main/css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="main/css/diy.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper" v-clock>
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">
                    <b>
                        <img src="assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item hidden-xs-down search-box">
                        <!--                        <a class="nav-link hidden-sm-down waves-effect waves-dark" href="javascript:void(0)">-->
                        <!--                            <i class="icon-Magnifi-Glass2"></i>-->
                        <!--                        </a>-->
                        <div class="app-search">
                            <input type="text" class="form-control" placeholder="Search &amp; enter" v-model="search_key" @keyup.enter="search">
                            <a class="srh-btn"><i class="ti-close"></i></a>
                        </div>
                    </li>
                </ul>
                <user-head></user-head>

            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="1"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">工作台</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item active">工作台</li>
                    </ol>
                </div>
            </div>
            <div class="row" v-if="isShowTab">
                <div class="col-md-12">
                    <div class="card">
                        <ul class="nav nav-tabs customtab">
                            <li class="nav-item" v-for="tab in tabs" :key="tab.type" @click="countType=tab.type">
                                <span class="nav-link" :class="countType==tab.type ? 'active' : ''">{{tab.label}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--row 1 -->
            <div class="index-total-list-box">
                <!-- Column -->
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex p-10 no-block">
                                <div class="align-self-center display-6 m-r-20"><i class="text-success icon-Target-Market"></i></div>
                                <div class="align-slef-center">
                                    <h2 class="m-b-0" v-html="total_user"></h2>
                                    <h6 class="text-muted m-b-0">总用户</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card" @mouseenter="isShowList=true" @mouseleave="isShowList=false">
                        <div class="card-body">
                            <div class="d-flex p-10 no-block">
                                <div class="align-self-center display-6 m-r-20"><i class="text-info icon-Add-User"></i></div>
                                <div class="align-slef-center">
                                    <h2 class="m-b-0" v-html="today_new"></h2>
                                    <h6 class="text-muted m-b-0">今日录入</h6>
                                </div>
                            </div>
                        </div>
                        <div class="today-join" v-if="isShowList && newsCustom && newsCustom.length">
                            <h3>今日录入</h3>
                            <div class="bef0 lh30 c26 fs12 border-top-0  mauto">
                                <div class="d-flex jsbet p-l-15 p-r-15  align-cen btef0 member-item" v-for="(v,k) in newsCustom" :key="k">
                                    <span class="name text">{{v.name}}</span>
                                    <span class="phone">{{v.phone}}</span>
                                    <span class="time">{{v.createTime | formatDate('yyyy/MM/dd hh:mm:ss')}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex p-10 no-block">
                                <div class="align-self-center display-6 m-r-20"><i class="text-primary icon-Dollar-Sign"></i></div>
                                <div class="align-slef-center">
                                    <h2 class="m-b-0" v-html="traded"></h2>
                                    <h6 class="text-muted m-b-0">成交客户</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex p-10 no-block">
                                <div class="align-self-center display-6 m-r-20"><i class="cffa133 icon-Administrator"></i></div>
                                <div class="align-slef-center">
                                    <h2 class="m-b-0" v-html="ownCount"></h2>
                                    <h6 class="text-muted m-b-0">独占客户</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex p-10 no-block">
                                <div class="align-self-center display-6 m-r-20"><i class="text-danger icon-Contrast"></i></div>
                                <div class="align-slef-center">
                                    <h2 class="m-b-0" v-html="turn_ratio"></h2>
                                    <h6 class="text-muted m-b-0">成交率</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--row 2 -->
            <div class="row">
                <div class="col-lg-8 col-md-12">
                    <div class="card">
                        <div class="row">
                            <!-- Column -->
                            <div class="col-lg-6 col-xlg-3 col-md-6 p-b-30">
                                <div class="card-body">
                                    <h5 class="card-title">待办事项</h5>
                                    <p class="m-t-40 fs24 m-b-8">今日需跟进{{need_follow_today}}人</p>
                                    <h6 class="card-subtitle m-b-30">已经{{no_follow_days}}天未跟进客户了哦</h6>
                                    <!--                                    <a href="javascript:void(0)" class="m-r-10" v-for="(v,k) in follow_clients" :key="k">-->
                                    <!--                                        <img :src="v.src" alt="user" class="img-circle" width="50">-->
                                    <!--                                    </a>-->
                                    <div class="clearfix"></div>
                                    <button type="button" class="btn btn-success m-t-135 p-l-43 p-r-41" @click="toFollow">去跟进</button>
                                </div>
                            </div>
                            <!-- Column -->
                            <div class="col-lg-6 col-xlg-9 col-md-6 b-l p-l-0 p-b-30">
                                <ul class="product-review p-t-80">
                                    <li style="padding-bottom: 75px;">
                                        <span class="text-muted display-5"><i class="icon-Smile"></i></span>
                                        <div class="dl m-l-10">
                                            <h3 class="card-title fs20">今日已跟进</h3>
                                            <h6 class="card-subtitle">客户{{has_follow_today}}人</h6>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-success"
                                                 role="progressbar"
                                                 style="height:6px;"
                                                 :style="{width:has_follow_today_percent}"
                                                 aria-valuenow="25"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="text-muted display-5"><i class="icon-Sleeping"></i></span>
                                        <div class="dl m-l-10">
                                            <h3 class="card-title fs20">今日未跟进</h3>
                                            <h6 class="card-subtitle">客户{{no_follow_today}}人</h6>
                                        </div>
                                        <div class="progress">
                                            <div class="progress-bar bg-primary"
                                                 role="progressbar"
                                                 style=" height:6px;"
                                                 :style="{width:no_follow_today_percent}"
                                                 aria-valuenow="25"
                                                 aria-valuemin="0"
                                                 aria-valuemax="100">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card col-lg-4">
                    <div class="card-body p-105rem">
                        <div class="d-flex m-b-30 no-block">
                            <h5 class="card-title m-b-0 align-self-center">客户兴趣</h5>
                            <div class="ml-auto">
                                <select class="custom-select b-0">
                                    <option selected="">近30天</option>
                                    <option value="1">近7天</option>
                                </select>
                            </div>
                        </div>
                        <div id="customerInterest" style="height:260px; width:100%;"></div>
                        <ul class="list-inline m-t-30 text-center font-12">
                            <li><i class="fa fa-circle text-danger"></i> 对我感兴趣</li>
                            <li><i class="fa fa-circle text-purple"></i> 喜欢产品</li>
                            <li><i class="fa fa-circle text-success"></i> 关注动态</li>
                            <li><i class="fa fa-circle text-info"></i> 看重公司</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--row 3 -->
            <div class="row">
                <div class="col-lg-8 col-md-12">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body h190 text-center disflex jscen align-cen align-content-center wrap">
                                    <div class="fbold fs48 cdeepblue w100p">
                                        ¥ {{orderAmount || 0 | formatMoney}}
                                    </div>
                                    <h5 class="card-title m-t-5 m-b-0">订单总额</h5>
                                </div>
                            </div>
                        </div>
                        <!-- Column -->

                        <div class="col-md-6">
                            <div class="card h190 text-center">
                                <div class="card-body disflex jscen align-cen align-content-center wrap">
                                    <div class="fbold fs48 cdeepblue w100p">
                                        {{countOrder || 0}}
                                    </div>
                                    <h5 class="card-title m-t-5 m-b-0">订单数量</h5>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h190">
                                <div class="card-body">
                                    <h5 class="card-title">业绩目标</h5>
                                    <div class="d-flex no-block">
                                        <div class="align-self-end no-shrink">
                                            <h2 class="m-b-0">已成交 ¥{{dealMoney}}</h2>
                                            <h6 class="text-muted">月目标¥{{targetMoney}}</h6>
                                        </div>
                                        <div class="ml-auto">
                                            <div id="prediction"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Column -->
                        <div class="col-md-6">
                            <div class="card h190">
                                <div class="card-body disflex flex-column jsbet">
                                    <h5 class="card-title">业绩差额</h5>
                                    <div class="d-flex no-block">
                                        <div class="no-shrink">
                                            <h2 class="m-b-0">还差 ¥{{lackMoney}}</h2>
                                            <h6 class="text-muted">本月已成交{{dealOrderCount}}单</h6>
                                        </div>
                                        <div class="ml-auto posab" style="right: 0;bottom:0;">
                                            <div id="sales" class="" style=" width:150px; height:140px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="card col-lg-4">
                    <div class="card-body p-105rem">
                        <div class="d-flex m-b-30 no-block">
                            <h5 class="card-title m-b-0 align-self-center">转化率漏斗</h5>
                            <div class="ml-auto">
                                <select class="custom-select b-0" v-model="dayNum">
                                    <option value="30" selected="">近30天</option>
                                    <option value="7">近7天</option>
                                </select>
                            </div>
                        </div>
                        <div class="loudou position-relative">
                            <img src="assets/images/diy/loudou.png" alt="">
                            <p class="look position-absolute cfff">浏览{{seeGoodsNum}}</p>
                            <p class="palce_order position-absolute cfff">下单{{orderCount}}</p>
                            <p class="pay position-absolute cfff">付款{{payCount}}</p>
                            <p class="right1 position-absolute">
                                下单转化率 <br>
                                {{seeGoodsNumRate}}
                            </p>
                            <p class="right2 position-absolute">
                                付款转化率 <br>
                                {{orderCountRate}}
                            </p>
                            <p class="right3 position-absolute">
                                成交转化率 <br>
                                {{payCountRate}}
                            </p>
                        </div>

                        <!--<div class="p-l-30">
                            <div class="bgpurple w45p  h80 textc cfff fs12 lh80 m-b-10">浏览2500</div>
                            <div class="w45p d-flex jscen">
                                <div style="width: 60%" class="lh80 textc cfff fs12 btn-success m-b-10">下单250</div>
                            </div>
                            <div class="w45p d-flex jscen">
                                <div style="width: 34%" class="lh80 textc cfff fs12 btn-danger">付款25</div>
                            </div>
                        </div>-->

                    </div>

                </div>
            </div>


            <!-- row 4 -->
            <div class="row bgfff">
                <!-- Column -->
                <div class="card-body">
                    <div class="d-flex no-block">
                        <div>
                            <h5 class="card-title m-b-0">近七日成交额（元）</h5>
                        </div>
                        <div class="ml-auto">
                            <ul class="list-inline text-center font-12">
                                <li><i class="fa fa-circle text-success"></i> 商城订单</li>
                                <li><i class="fa fa-circle text-info"></i> 个人成交订单</li>
                                <li v-if="countType==2"><i class="fa fa-circle text-primary"></i> 企业成交订单</li>
                            </ul>
                        </div>
                    </div>
                    <div class="" id="sales-chart" style="height: 355px;"></div>
                </div>
            </div>

        </div>

    </div>
</div>
<!-- All Jquery -->
<script src="main/js/vue.js"></script>
<!-- ============================================================== -->
<script src="main/js/jquery.min.js"></script>
<!-- Bootstrap popper Core JavaScript -->
<!-- <script src="assets/node_modules/bootstrap/js/popper.min.js"></script> --><!-- 没用到 -->
<script src="main/js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="main/js/perfect-scrollbar.jquery.min.js"></script>
<!--Wave Effects -->
<!-- <script src="main/js/waves.js"></script>-->
<!--Menu sidebar -->
<script src="main/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="main/js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--morris JavaScript -->
<script src="main/js/raphael-min.js"></script>
<script src="main/js/morris.min.js"></script>
<!--c3 JavaScript -->
<script src="main/js/d3.min.js"></script>
<script src="main/js/c3.min.js"></script>
<!-- Popup message jquery -->
<!-- <script src="assets/node_modules/toast-master/js/jquery.toast.js"></script> --><!-- 没用到 -->
<!-- Chart JS -->
<!--<script src="main/js/dashboard1.js"></script>-->
<script src="main/js/layer/layer.js"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<!-- <script src="assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> --><!-- 没用到 -->
<script src="main/js/config.js"></script>
<script src="main/js/extend.js"></script>
<script src="main/js/views/index.js"></script>
<!--<script src="js/Aside.js"></script>-->
</body>
</html>












